<template>
  <v-table :data="tableData" :columns="columns" :editConfig="{edit: true, mode: 'cell'}">
    <template v-slot:operation="scope">
      <el-button type="primary" size="mini" @click="isAdd(scope.row)">添加</el-button>
      <el-button type="danger" size="mini">删除</el-button>
    </template>
  </v-table>
</template>
<script>
export default {
  data () {
    return {
      tableData: [{
        name: '张胜男',
        cname: '张胜男',
        ename: 'july',
        sex: '女',
        age: 18
      }, {
        name: '里斯',
        sex: '男',
        age: 20,
        cname: '里斯',
        ename: 'lvey'
      }],
      columns: [{
        label: '#',
        type: 'expand',
        width: '55px',
        render: (h, scope) => {
          return (<el-tag size={'mini'}>一级</el-tag>)
        },
        children: [{
          prop: 'name',
          label: '名称'
        }]
      },
      {
        prop: 'base',
        label: '基本信息',
        children: [{
          prop: 'name',
          label: '名称',
          children: [{
            prop: 'cname',
            label: '中文名称',
            editType: 'select',
            editConfig: {
              type: 'text',
              placeholder: '请输入中文名称',
              change (val) {
                console.log(val)
              }
            }
          }, {
            prop: 'ename',
            label: '英文名称',
            renderHeader () {
              return 'render英文名称'
            },
            render (h, scope) {
              // console.log(scope)
              return <span>{'render ename value'}</span>
            }
          }]
        }, {
          prop: 'sex',
          label: '性别'
        }, {
          prop: 'age',
          label: '年龄'
        }]
      },
      // {
      //   prop: 'name',
      //   label: '名称',
      //   renderHeader: (h, { column, $index }) => {
      //     return h('el-tag', {}, 'h函数渲染名称')
      //   },
      //   render: (h, scope) => {
      //     console.log(scope)
      //     return (<el-tag
      //       size={'mini'}
      //       closable
      //       effect={'plain'}
      //       onClick={() => { console.log(scope.row) }}
      //       onClose={() => { console.log('close') }}
      //       >
      //       {scope.row.name}
      //     </el-tag>)
      //   }
      // },
      // {
      //   prop: 'sex',
      //   label: '性别',
      //   slotScope: 'sex'
      // },
      // {
      //   prop: 'age',
      //   label: '年龄'
      // },
      {
        label: '操作',
        prop: 'operation'
      }]
    }
  },
  methods: {
    isAdd (row) {
      console.log(row)
    }
  }
}
</script>

<style></style>
